<script>
import axios from '@/http'; // 导入你创建的 Axios 实例
export default {
  name: 'HomeView',
  data() {
    return {
      msg: '你是谁',
      session: "",
      answer: "",
      answers: [],
      ulist: []
    };
  },
  mounted() {
    let question = {
      question: '你是谁'
    }
    // axios.post('/chat',question).then(res => {
    //   this.msg = res.data;
    // });
  },  
  methods: {
    sendMessage(){
      let question = { question: this.msg, session:this.session}
      this.answers.push("用户："+this.msg)
      //调用 接口，把name,age
      axios.post('/chat1',question).then(res=>{
        console.log(res)
        this.answer = this.answer + "\n 回答："+res.data.text
        
        // this.session = this.msg;
        
        this.answers.push("回答："+res.data.text)
      })
    },
    sendMessageStream(){
      this.answer = this.answer+ "\n 用户："+this.msg
      this.source = new EventSource("http://127.0.0.1:8000/api/ssechat?question="+this.msg);

      this.answer = this.answer + "\n 回答："
      this.source.onmessage = (event=> {
        this.answer = this.answer + event.data
      });

      this.source.onerror = (error=> {
          console.error('EventSource failed:', error);
          this.source.close();
          this.source = null;
      });
    },
    newsession(){      
      this.answer= "";
      this.answers= [];
      this.session= "";
    },
    sessionList(){
      axios.get('/sessionList').then(res=>{

        // res

      })
    },
    showsession(){

    }
  }
};

</script>

<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" class="left">
          <el-button type="primary" size="large" @click="newsession()">新建对话</el-button>
          <div>会话列表</div>
            <ul>
              
            <li v-for="(session,index) in ulist" :key='index'>
                <el-button type="primary" size="large" @click="showsession()">{{session.name}}</el-button></li>
            </ul>
        </el-aside>
        <el-main class="right">
          <div class="show">展示区</div>
          
          <div class="show">
            
            <p style="white-space: pre-line;">{{ answer }}</p>
           
            <!-- <ul>
            <li v-for="(aw,index) in answers" :key='index'>{{aw}}</li>
            </ul> -->


          </div>
          <div>
            <el-input v-model="msg" placeholder="Please input" />
            <el-button type="primary" size="large" @click="sendMessage()">发送</el-button>
          </div>
        </el-main>
      </el-container>
    </div>
</template>

<style scoped>
.left {
  background-color:blueviolet;
  height: 800px;
}
.right {
  background-color:black;
  height: 800px;
}
.show{
  color:aliceblue;
}
</style>

